<template>
	<view class="discount">
		<view class="main">
			<view v-for="(item,index) in list" :key="index" class="list">
				<view class="top">
					<view style="display: flex;align-items: center;">
						<image style="width: 110rpx;padding-right: 24rpx;" src="http://applet.atptest.com/23042305.png"
							mode="widthFix"></image>
						<view>
							<view style="font-weight: 700;font-size: 32rpx;">{{item.name}}</view>
							<view style="font-size: 28rpx;color: #CA614E;margin-top: 12rpx;">{{item.time}}</view>
						</view>
					</view>
					<view style="text-align: right;">
						<view style="font-size: 28rpx;color: #3E56BA;"><text v-if="item.price">￥</text> <text style="font-size: 48rpx">{{item.price}}</text></view>
						<view style="font-size: 28rpx;color: #666263;">{{item.menlan}}</view>
					</view>
				</view>
				<view class="bottom">
					<view style="font-size: 22rpx;color: #B7B7B7;">限外观检测使用，一天只能使用一张</view>
					<view style="display: flex;">
						<view style="margin-right: 18rpx;">
							<u-button text="分享"></u-button>
						</view>
						<view>
							<u-button text="去使用"></u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '外观免费券',
						time: '2023.04.27',
						price: '',
						menlan: '仅外观检测可用',
					},
					{
						name: '外观免费券',
						time: '2023.04.27',
						price: '20',
						menlan: '无门槛',
					},
					{
						name: '外观免费券',
						time: '2023.04.27',
						price: '20',
						menlan: '满200可用',
					},
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.discount {
		padding: 0 20rpx;
		background-color: #f5f5f5;
		.main {
			.list {
				height: 244rpx;
				margin-top: 10rpx;
				padding: 0 22rpx;
				border-radius: 8rpx;
				background-color: #fff;

				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 62%;
					border-bottom: 1px dashed #ededed;
				}

				.bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 35%;
				}
			}
		}
	}

	/deep/ .u-button--info {
		color: #fff !important;
		background-color: #4058bb !important;
		border-color: #4058bb !important;
	}

	/deep/ .u-button {
		height: 50rpx !important;
	}

	/deep/ .u-button--normal {
		padding: 2rpx 24rpx !important;
	}

	/deep/ .u-button--square {
		border-bottom-left-radius: 25rpx !important;
		border-bottom-right-radius: 25rpx !important;
		border-top-left-radius: 25rpx !important;
		border-top-right-radius: 25rpx !important;
	}
</style>
